<template>
  <div class="box">
    <el-form ref="form" :rules="rules" :model="data">
      <el-form-item>
        <h2>任务类型：</h2>
        <el-form-item prop="jobType" label-width="90px">
          <el-radio-group v-model="data.jobType">
            <el-col v-for="f in selectTaskMode" :key="f.value" :span="8">
              <el-radio :label="f.value" style="margin: 8px">
                {{ f.text }}</el-radio>
            </el-col>
          </el-radio-group></el-form-item>
      </el-form-item>
      <el-form-item><h2>评估对象</h2></el-form-item>
      <el-form-item
        prop="taskWay"
        label="获取评估对象的方式："
        label-width="210px"
      >
        <el-radio-group v-model="data.taskWay">
          <el-radio
            v-for="dict in dict.type.appraise_taskway"
            :key="dict.value"
            :label="dict.value"
          >{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="
          data.jobType == 'EVALUATE_TABLE' ||
            data.jobType == 'EVALUATE_MIGRATION'
        "
        prop="taskCount"
        label="统计表信息："
        label-width="153px"
        style="margin: 0"
      />
      <el-form-item
        v-if="
          data.jobType == 'EVALUATE_TABLE' ||
            data.jobType == 'EVALUATE_MIGRATION'
        "
        label=""
        label-width="150px"
      >
        <el-checkbox-group
          v-model="data.taskCount"
          @change="handleCheckedCitiesChange"
        >
          <el-col
            v-for="f in dict.type.appraise_countmode"
            :key="f.value"
            :span="12"
          >
            <el-checkbox
              :disabled="f.raw.remark.indexOf('dis') != -1"
              :label="f.value"
            >{{ f.label }}
            </el-checkbox>
          </el-col>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Vue from 'vue'

export default {
  dicts: [
    'appraise_countmode',
    'appraise_taskmode',
    'appraise_taskway',
    'db_object_type'
  ],
  components: {},
  props: ['data'],
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      form: {
        taskCount: []
      },
      rules: {
        taskWay: [
          {
            required: true,
            message: '请选择评估对象的方式',
            trigger: 'change'
          }
        ],
        taskCount: [
          { required: true, message: '请选择统计表信息', trigger: 'change' }
        ],
        jobType: [
          { required: true, message: '请选择指定模式', trigger: 'change' }
        ]
      },
      selectTaskMode: []
    }
  },
  async mounted() {
    const res = await this.getDicts('appraise_countmode')
    this.$props.data.taskCount = []
    res.data.forEach((f, i) => {
      if (f.remark.split('-')[0] == '1') {
        Vue.set(this.$props.data.taskCount, i, f.dictValue)
        return
      }
    })
    if (!this.$props.data.taskWay) {
      Vue.set(this.$props.data, 'taskWay', '1')
    }
    if (!this.$props.data.taskTables) {
      Vue.set(this.$props.data, 'taskTables', [])
    }
    if (!this.$props.data.taskMode) {
      Vue.set(this.$props.data, 'taskMode', '')
    }
    if (!this.$props.data.jobType) {
      Vue.set(this.$props.data, 'jobType', 'EVALUATE_MIGRATION')
    }

    this.$emit('getTaskMode', this.selectTaskMode)
  },
  methods: {
    handleCheckAllChange(val) {
      this.$props.data.taskCount = this.dict.type.appraise_countmode.map((f) =>
        val ? f.value : []
      )
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.dict.type.appraise_countmode.length
      this.isIndeterminate =
        checkedCount > 0 &&
        checkedCount < this.dict.type.appraise_countmode.length
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  margin-top: 40px;
  width: 100%;
  padding: 30px 10%;
  margin: 40px auto;
  border: 1px solid #dcdfe6;
  border-radius: 5px;

  h2 {
    font-size: 17px;
    color: #606266;
    font-weight: 700;
    display: inline-block;
    margin: 0;
    padding: 0;
  }

  h2:before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
  }

  h3 {
    margin: 0;
    font-weight: 600;
  }
}

.el-checkbox__label {
  font-size: 16px;
  color: #606266;
  font-weight: 700;
}
</style>
